<script setup>
import { ref, reactive, toRefs, toRaw, onMounted } from "vue";
import { getShowState } from "@/hooks/subject";
import {
  getTableData,
  deleteItem,
  editIsShow,
  addItem,
  getItemInfo,
  editItem,
} from "@/api/subject/subject";
import { Link as IconLink } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
let queryData = ref({
  subject_name: "",
  is_show: "",
  page: 1,
  limit: 10,
});

const states = getShowState(false);
// 搜索
const handlerSearch = () => {
  queryData.value.limit = 10;
  queryData.value.page = 1;
  initData();
};

// 重置
const handlerReset = () => {
  queryData.value = {
    subject_name: "",
    is_show: "",
    page: 1,
    limit: 10,
  };
  initData();
};

const tableData = ref([]);
const columnData = [
  { prop: "id", label: "学科ID", isCustom: false },
  { prop: "subject_name", label: "学科名称", isCustom: false },
  { prop: "subject_icon", label: "学科图标", isCustom: true },
  { prop: "username", label: "创建人", isCustom: false },
  { prop: "is_show", label: "是否显示", isCustom: true },
  { prop: "cate_num", label: "目录数量", isCustom: true },
];
const total = ref(0);

// 初始化表格数据
const initData = async () => {
  const res = await getTableData(queryData.value);
  tableData.value = res.data.list;
  total.value = res.data.total;
};
initData();

// 编辑回显
const handlerEdit = async (val) => {
  const res = await getItemInfo(val);
  formData.value = res.data;
  dialogVisible.value = true;
};

// 删除
const handlerDel = async (val) => {
  await deleteItem(val);
  ElMessage.success("删除成功");
  initData();
};

// 分页
const handleSizeChange = async (val) => {
  queryData.value.limit = val;
  initData();
};

const handleCurrentChange = async (val) => {
  queryData.value.page = val;
  initData();
};

// 是否显示
const handlerShowChange = async (id, is_show) => {
  if (!id) return;
  await editIsShow(id, is_show);
  ElMessage.success("切换成功");
};

// 弹框
const dialogVisible = ref(false);
const formData = ref({
  subject_name: "",
  sort: "",
  is_show: "",
  subject_icon: "",
});

const rules = ref({
  subject_name: [
    { required: true, message: "请输入学科名称", trigger: "blur" },
  ],
  sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
});

const form = ref(null);
const onSubmit = async () => {
  await form.value.validate();
  console.log();
  formData.value.id
    ? await editItem(formData.value)
    : await addItem(formData.value);
  formData.value.id
    ? ElMessage.success("编辑成功")
    : ElMessage.success("添加成功");
  dialogVisible.value = false;
  initData();
};

// 弹框关闭回调
const handleClose = () => {
  form.value.resetFields();
};
</script>
<template>
  <el-card>
    <!-- 搜索组件 -->
    <searchHeader @handlerSearch="handlerSearch" @handlerReset="handlerReset">
      <template #search>
        <el-form :model="queryData" ref="form" label-width="80px" inline>
          <el-form-item label="学科名称">
            <el-input
              v-model="queryData.subject_name"
              placeholder="请输入学科名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="显示状态">
            <el-select
              v-model="queryData.is_show"
              placeholder="请选择显示状态"
              clearable
              filterable
            >
              <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #btn>
        <el-button
          type="primary"
          plain
          class="btn"
          @click="dialogVisible = true"
          >创建学科</el-button
        >
      </template>
    </searchHeader>
    <!-- 表格组件 -->
    <MyTable
      :tableData="tableData"
      :columnData="columnData"
      :currentPage="queryData.page"
      :pageSize="queryData.limit"
      :total="total"
      @edit="handlerEdit"
      @del="handlerDel"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <template #subject_icon="{ row }">
        <img
          v-if="row.subject_icon"
          class="img"
          :src="'http://124.223.14.236:7005/' + row.subject_icon"
          alt=""
        />
        <span v-else>暂无</span>
      </template>
      <template #is_show="{ row }">
        <el-switch
          v-model="row.is_show"
          active-text="是"
          inactive-text="否"
          :active-value="1"
          :inactive-value="2"
          @change="handlerShowChange(row.id, row.is_show)"
        />
      </template>
      <template #cate_num="{ row }">
        <el-link type="primary" v-if="row.cate_num">
          {{ row.cate_num }}
          <el-icon>
            <icon-Link />
          </el-icon>
        </el-link>
        <span v-else>{{ row.cate_num }}</span>
      </template>
    </MyTable>
    <!-- 弹框 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加学科"
      width="30%"
      @close="handleClose"
    >
      <el-form
        :model="formData"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
      >
        <el-form-item label="学科名称" prop="subject_name">
          <el-input
            v-model="formData.subject_name"
            placeholder="请输入学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="formData.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </el-card>
</template>



<style lang="scss" scoped>
.btn {
  width: 100px;
  height: 40px;
}
.img {
  width: 40px;
  height: 40px;
}
</style>